<template>
    <div class="ziyuan">
        <ModalTitle title="执法信息资源接入分析"></ModalTitle>
        <div class="ziyuan-chart" ref="ziyuanChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaYunXDB } from '@/api/zhangzi'
export default {
    components: {
        ModalTitle
    },
    data() {
        return {

        }
    },

    mounted() {
        this.ziyuanChartData()
    },

    methods: {
        ziyuanChartData() {
            // 执法信息资源接入分析
            ZongHeZhiFaYunXDB.zongheZhiFaJieKouAPI().then(res => {
                let count = []
                let date = []
                console.log(res, '执法信息资源接入分析')
                if (res.code == 200) {
                    res.data.forEach(item => {
                        count.push(item.count)
                        date.push(item.date)
                    })
                    this.ziyuanChartFn(count,date)
                }
            })
           
        },

        ziyuanChartFn(count,date) {
            let xData = date;  //x数据
            let colorList = ['#A1E3FD', '#005BC7',]
            let firstIndustry = count; //上报
            let ziyuanChart = echarts.init(this.$refs.ziyuanChart)
            let option = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: '#fff',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '时限',
                        axisLabel: {
                            formatter: '{value} '
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: '#fff',
                                fontSize: "1rem"
                            }
                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: true,
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(161,227,253, 0.5)', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(161,227,253)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(161,227,253, 0.5)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                ]
            }
            ziyuanChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.ziyuan {
    width: 100%;
    height: 31.5rem;
    margin: 1.5rem 0;

    .ziyuan-chart {
        width: 100%;
        height: 25rem;
    }
}
</style>